<template>
    <div>
        <div class="tab-nav ">
    <div class="wrapper">
        <ul class="fl sui-nav nav-tabs navbar-dark">
            <li class="active"><a href="#index" data-toggle="tab">首页</a></li>
            <li><a href="#php" data-toggle="tab">Php</a></li>
            <li><a href="#js" data-toggle="tab">Javascript </a></li>
            <li><a href="#python" data-toggle="tab">Python</a></li>
            <li><a href="#java" data-toggle="tab">Java</a></li>
        </ul>
        <span class="fr more"><a href="./qa-allTag.html" target="_blank">更多</a></span>
        <div class="clearfix"></div>
    </div>

</div>
    <!--两列布局-->
    <div class="wrapper release-tc">
        <div class="release-box">
            <h3>发布吐槽</h3>
            <div class="editor">
                <!-- 
                   content:文章正文数据模型 
                   change
                   blur
                   focus
                   ready
                -->
               <div class="quill-editor" 
                    :content="content"      
                    @change="onEditorChange($event)"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"
                    @ready="onEditorReady($event)"
                    v-quill:myQuillEditor="editorOption">
                </div>
                <div class="btns">
                        <button @click="submit" class="sui-btn btn-danger btn-release">发布</button>
                </div>
               
                <div class="clearfix"></div>
            </div>
        </div>

        <div class="clearfix"></div>
    </div>
    </div>
</template>

<script>
import "~/assets/css/page-sj-spit-submit.css"
import {quillRedefine} from 'vue-quill-editor-upload'
import spitAoi from "~/api/spit"
export default {
    data () {
      return {
        content: '',
        editorOption: {
        }
      }
    },
    created () {
      this.editorOption = quillRedefine(
        {
          // 图片上传的设置
          uploadConfig: {
            action:  'http://localhost:3000/upload',  // 必填参数 图片上传地址
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (respnse) => {
              return respnse.info  // 这里切记要return回你的图片地址
            }
          }
        }
      )
     // console.log(this.editorOption)
    },
    methods: {
        submit() {
            spitAoi.save({content:this.content}).then(res => {
                //当吐槽添加完成之后，跳转到吐槽列表页
                if(res.data.flag) {
                    location.href="/spit"
                }
            })
        },
        onEditorBlur(editor) {
        
        },
        onEditorFocus(editor) {
        },
        onEditorReady(editor) {
        },
        onEditorChange({ editor, html, text }) {
            this.content = html
        }
    }
}
</script>

<style>
 .quill-editor {
      min-height: 200px;
      max-height: 400px;
      overflow-y: auto;
    }
</style>
